import React from "react";
import {Tabs} from "antd";
import apxMethodStore from "../../../api/http/definition/store/ApxMethodStore";
import {observer} from "mobx-react";
const { TabPane } = Tabs;

/***
 * 请求中的tab，公共组件
 */
const RequestTab = (props) =>{
    const {editPage} = props;
    const {tabTipObj} = apxMethodStore;

    //渲染tabPane
    const showTabPane = (data)=>{
        let arr = Object.keys(data)

        return arr.map((item)=>{
            //如果没有传进来的assert组件，并且当前item是asset，直接返回null
            if(!props.assert&&item==="assert") return null

            // 获取显示的数量
            const getCount = (type) => {
                if (type === 'body') {
                    return tabTipObj.body || 0;
                }
                return tabTipObj[type] || 0;
            };

            return(
                <TabPane
                    tab={
                        <div style={{"display":"flex","alignItems":"center"}}>
                            {data[item]}

                            {
                                editPage&&
                                <div>
                                    {
                                    getCount(item) > 0
                                        ?<div
                                            style={{
                                                color: "#999",
                                                fontSize: "12px",
                                                lineHeight: "18px",
                                                height: "16px",
                                                minWidth: "14px",
                                                textAlign: "center"
                                            }}>{getCount(item)}</div>
                                        :null
                                    }
                                </div>
                            }
                        </div>
                    }
                    key={item}
                >
                    <div className={"tabPane-item-box"}>
                        {
                            showTabPaneComponent(item)
                        }
                    </div>
                </TabPane>
            )
        })
    }

    /**
     *   渲染相应tab下的组件
     */
    const showTabPaneComponent =(type)=>{
        switch (type) {
            case "header":
                return props.header
            case "query":
                return props.query
            case "path":
                return props.path
            case "body":
                return props.body
            case "pre":
                return props.pre
            case "after":
                return props.after
            case "assert":
                return props.assert
        }
    }

    //请求中tab的名称
    const requestTabDictionary = ()=>{
        if(props.path){
            return{
                "header":"Header",
                "query":"Query",
                "path":`Path`,
                "body":"Body",
                "pre":"前置脚本",
                "after":"后置脚本",
                "assert":"断言"
            }
        }else {
            return {
                "header":"Header",
                "query":"Query",
                "body":"Body",
                "pre":"前置脚本",
                "after":"后置脚本",
                "assert":"断言"
            }
        }
    }

    let tapObj = requestTabDictionary()

    return(
        <Tabs className="tabs" size={"small"}>
            {
                showTabPane(tapObj)
            }
        </Tabs>
    )
}

export default observer(RequestTab);